<!--
 * @Description: 分类目录管理页面
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2020-09-14 14:48:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-20 17:13:15
-->

<template>
  <div class="category" style="min-width: 536px; height: 100%">
    <fks-query-page
      v-loading="tableLoading"
      :data="tableData"
      :total="total"
      :page-size.sync="pageSize"
      :current-page.sync="pageNo"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100]"
      :element-loading-text="LANG.LOADING"
      :table-name="LANG.CMS_CATEGORY"
      @query="getList"
      @clear="clear"
      @sort-change="sortHandle"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-input
            v-model="keywords"
            maxlength="50"
            size
            class="single-searchBox-item"
            :placeholder="LANG.INPUT_CATEGORYNAME"
            clearable
            @clear="search"
            @keyup.native.enter="search"
          >
            <fks-button slot="append" icon="fks-icon-search" @click="search" />
          </fks-input>
          <fks-button
            v-permission="['category:add']"
            icon="fks-icon-plus"
            type="primary"
            @click="addCategory"
          >
            {{ LANG.ADD }}
          </fks-button>
        </div>
      </template>

      <template class="category_Table">
        <fks-table-column
          label="#"
          width="55"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          sortable="custom"
          :label="LANG.NAME"
          prop="categoryName"
          min-width="300px"
          header-align="center"
          is-link
          align="left"
          @link="showCategory"
        />

        <fks-table-column
          :label="LANG.DESCRIPTION"
          prop="description"
          min-width="300px"
          header-align="center"
          align="left"
        />
        <fks-table-column
          :label="LANG.CODE"
          prop="id"
          width="200px"
          align="left"
        />
        <fks-table-column
          :label="LANG.UPDATE_DATE"
          sortable="custom"
          prop="updateDate"
          width="200px"
          align="center"
        />
        <fks-table-column
          sortable="custom"
          prop="isHide"
          :label="LANG.IS_SHOW"
          header-align="center"
          width="120px"
        >
          <span slot-scope="scope">
            <fks-switch
              v-model="scope.row.isHide"
              :disabled="!nodePermission('category:edit', { types: [1] })"
              :active-value="0"
              :inactive-value="1"
              @change="switchHandle($event, scope.row)"
            />
          </span>
        </fks-table-column>
        <fks-table-column
          v-if="
            nodePermission(['category:delete', 'category:edit'], {
              types: [1]
            })
          "
          :label="LANG.OPERATION"
          header-align="center"
          align="left"
          width="100"
        >
          <span slot-scope="scope">
            <fks-button
              v-permission="['category:edit']"
              type="text"
              @click="editCategory(scope.row)"
              >{{ LANG.EDIT }}</fks-button
            >
            <fks-button
              v-permission="['category:delete']"
              type="text"
              style="color: #ff4d4f"
              @click="delCategory(scope.row)"
              >{{ LANG.DELETE }}</fks-button
            >
          </span>
        </fks-table-column>
      </template>
    </fks-query-page>

    <div class="dialogs">
      <add-category-dialog
        :visible="visible_add_category"
        :category-info="category_info"
        :operate-type="operate_type"
        @close="closeAddCategory"
        @submit="submitAddCategory"
      />
    </div>
  </div>
</template>

<script>
import { delCategoryById, updateCategory } from './api/index'
import { getCategoryList, getContentList } from '@/modules/Content/api'
import { transDate } from '@/modules/Content/util'
import AddCategoryDialog from './components/AddCategory/index'
import Mix from '@/mixins/module'
export default {
  name: 'Category',
  components: {
    AddCategoryDialog
  },
  mixins: [Mix],
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      total: 0,
      tableLoading: false,
      visible_add_category: false,
      sort: '',
      columnName: '',
      keywords: '',
      operate_type: 'new',
      tableData: [], //table展示用数据
      category_info: {},
      categoryList: [] //获取到的分类目录数据
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initData()
  },
  methods: {
    transDate,
    /**
     * @description: 排序响应
     * @param {prop,order} sort
     */
    sortHandle(sort) {
      this.columnName = sort.prop
      if (!sort.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = sort.order === 'ascending' ? 'asc' : 'desc'
      }
      this.getList()
    },
    /**
     * @description: 目录显隐控制
     */
    switchHandle($event, row) {
      let newForm = {
        id: row.id,
        description: row.description,
        categoryName: row.categoryName,
        templateId: row.templateId,
        isHide: row.isHide
      }
      updateCategory(newForm)
    },

    /**
     * @description: 弹窗控制相关代码
     */
    addCategory() {
      this.operate_type = 'new'
      this.openAddCategory()
    },
    editCategory(row) {
      this.operate_type = 'edit'
      this.category_info = row
      this.openAddCategory()
    },
    showCategory({ row }) {
      this.operate_type = 'show'
      this.category_info = row
      this.openAddCategory()
    },
    openAddCategory() {
      this.visible_add_category = true
    },
    closeAddCategory() {
      this.visible_add_category = false
      this.category_info = {}
      this.operate_type = 'new'
    },
    submitAddCategory() {
      this.closeAddCategory()
      this.search()
    },

    /**
     * @description: 删除分类目录；新增与更新放在AddCategoryDialog里
     *               当该分类目录下还有内容时，禁止删除
     */
    delCategory(row) {
      this.$confirm(this.LANG.DELETE_CONFIRM, this.LANG.TIPS, {
        deleteMode: true,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        type: 'warning'
      })
        .then(() => {
          this.delCategoryById(row.id)
        })
        .catch(() => {})
    },
    delCategoryById(id) {
      let temp = {
        page: 1,
        size: 1,
        categoryId: id
      }
      getContentList(temp)
        .then((res) => {
          if (res.status) {
            if (res.data) {
              this.$message({
                type: 'error',
                message: this.LANG.ERROR_HASCONTENT
              })
            } else {
              delCategoryById(id)
                .then((res) => {
                  if (res.status) {
                    this.$message({
                      type: 'success',
                      message: this.LANG.DELETE_SUCCESS
                    })
                    this.search()
                  }
                })
                .catch(() => {})
            }
          }
        })
        .catch(() => {})
    },
    /**
     * @description:获得category_Table的展示数据
     */
    @permission('content:category')
    getList: async function () {
      this.tableLoading = true
      await this.getCategoryList()
      this.tableData = [...this.dealData(this.categoryList)]
      this.tableLoading = false
    },
    getCategoryList() {
      let temp = {
        page: this.pageNo,
        size: this.pageSize,
        name: this.keywords,
        columnName: this.columnName,
        sort: this.sort
      }
      return getCategoryList(temp)
        .then((res) => {
          if (res.status) {
            this.categoryList = res.data.voList ? res.data.voList : []
            this.total = Number(res.data.itemNumber)
          }
        })
        .catch(() => {
          this.categoryList = []
        })
    },

    /**
     * @description:
     * @param {Object} 从后端获取的List
     * @return {Object} 处理之后用于table展示的List
     */
    dealData(list) {
      let newList = JSON.parse(JSON.stringify(list))
      let returnList = []
      newList.forEach((item) => {
        let temp = item.category
        temp.updateDate = this.transDate(temp.updateDate)
        returnList.push(temp)
      })
      return returnList
    },

    /**
     * @description: 翻页与搜索框
     */
    pageSizeChange(size) {
      this.pageSize = size
      this.initData()
    },
    pageChange(page) {
      this.pageNo = page
      this.initData()
    },
    search() {
      this.pageNo = 1
      this.getList()
    },
    clear() {
      this.Form = {}
      this.initData()
    },
    initData() {
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
</style>
